<template>

  <div class="classification">
    <div class="aui-row">
      <div @click=" goClassify(item)"
           class="aui-col-xs-4"
           style="padding: 0.5rem  1rem"
           v-for="(item, index) in classifyData" :key="index">
        <div class="cjy-pic-outer"
             style="">
          <img style="position:absolute" v-lazy="item.imageUrl || 'static/image/demo2.png'"/>
        </div>
        <div class="aui-grid-label" style="padding-top: 0.3rem">{{item.goodsClassName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import VerticalScroll from '@/real-components/VerticalScroll'

  import {mapGetters, mapMutations} from "vuex";

  export default {
    data() {
      return {}
    },
    components: {VerticalScroll},
    methods: {
      goClassify(item) {
        this.$router.replace({path: 'goodsclassify', query: {'classCode': item.goodsClassCode}})
        this.$emit('hideClassify')
      }
    },
    props: {
      classifyData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    watch: {},
    computed: {

      // classifyData() {
      //   if (this.classifyData) {
      //     var classifyData = this.classifyData.filter((item) => {
      //       return item.parentclasscode == '1' && item.goodsclasscode != "1"
      //     })
      //     return classifyData
      //   } else {
      //     return []
      //   }
      // }
    },
    created() {

    },
    mounted() {
    }
  }
</script>

<style>
  .cjy-pic-outer {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow-x: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
  }

  .aui-grid-label {
    height: 1.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
